<template>
    <div class="configure-content">
        <div class="configure-title">
            <span>最近修改时间为：{{ lately_update_time }}</span>
            <div class="btn-box">
                <el-button v-auth="'CUSTOMER_PROP_ADVANCED_SETTING'" plain @click="showConfigureAdvanced"
                    >高级设置</el-button
                >
                <el-button v-auth="'CUSTOMER_PROP_ADD_CUSTOMER_PROP'" type="primary" @click="showAddConfigure"
                    >新增客户属性</el-button
                >
            </div>
        </div>

        <el-table
            v-if="showTable"
            id="tableRef"
            header-row-class-name="table_header_title"
            class="configure-table-box"
            :data="tableData">
            <el-table-column width="100">
                <template #default>
                    <img src="@/assets/customer/sort-icon.png" class="sortImg" alt="" />
                </template>
            </el-table-column>
            <el-table-column prop="name" label="属性名" width="200"></el-table-column>
            <el-table-column prop="typeName" label="格式" width="200"></el-table-column>
            <el-table-column label="选项内容" width="220">
                <template #default="scope">
                    <el-popover
                        v-if="scope.row.attr_val_name"
                        :width="300"
                        trigger="hover"
                        popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;">
                        <template #reference>
                            <span class="line">{{ scope.row.attr_val_name || '--' }}</span>
                        </template>
                        <template #default>
                            <span>{{ scope.row.attr_val_name || '--' }}</span>
                        </template>
                    </el-popover>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="order" label="排序"></el-table-column> -->
            <el-table-column label="状态" min-width="120">
                <template #default="scope">
                    {{ scope.row.is_enable ? '已开启' : '未开启' }}
                </template>
            </el-table-column>
            <el-table-column label="类型" min-width="120">
                <template #default="scope">
                    {{ scope.row.is_system ? '系统' : '自定义' }}
                </template>
            </el-table-column>
            <el-table-column label="必填" min-width="120">
                <template #default="scope">
                    {{ scope.row.is_required == 1 ? '否' : '是' }}
                </template>
            </el-table-column>
            <el-table-column prop="created_name" label="创建人" min-width="120"></el-table-column>
            <el-table-column label="操作" fixed="right" min-width="300">
                <template #default="scope">
                    <el-button
                        v-if="scope.row.system_code != 'mobile' && scope.row.system_code != 'remark_mobile'"
                        v-auth="'CUSTOMER_PROP_OPEN_CLOSE'"
                        size="small"
                        @click="openOrClose(scope.row)"
                        >{{ !scope.row.is_enable ? '开启' : '关闭' }}</el-button
                    >
                    <el-button
                        v-if="!scope.row.is_system"
                        v-auth="'CUSTOMER_PROP_EDIT'"
                        size="small"
                        @click="showEdit(scope.row)"
                        >编辑</el-button
                    >
                    <el-button
                        v-if="!scope.row.is_system"
                        v-auth="'CUSTOMER_PROP_DEL'"
                        size="small"
                        @click="del(scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
            <template #empty>
                <img class="emty_img" src="@/assets/noData.png" alt="" />
                <div class="emty_title">暂无数据</div>
            </template>
        </el-table>
        <!-- <ConfigureTable id="tableRef" v-if="showTable" :tableData="tableData" @refresh="getTableList" @edit="showEdit" /> -->
        <AddConfigure ref="AddConfigureRef" :type-list="typeList" @save="getTableList" />
        <ConfigureAdvanced ref="ConfigureAdvancedRef" />
    </div>
</template>

<script setup lang="ts">
import Sortable from 'sortablejs';
import { ref, reactive, nextTick, onMounted } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
// import ConfigureTable from './ConfigureTable.vue'
import ConfigureAdvanced from './ConfigureAdvanced.vue';
import ZWPagination from '@/components/ZWPagination.vue';
import AddConfigure from './AddConfigure.vue';
import { attrList, attrSort, updateStatus, delAttr } from '../api';
import { useStore } from '@/store';
import { Plus } from '@element-plus/icons-vue';
const tableData = ref([]);
const AddConfigureRef = ref({});
const ConfigureAdvancedRef = ref(null);
const showTable = ref(false);
const store = useStore();
const lately_update_time = ref('');
let canClick = true;
const typeList = reactive([
    { label: '单行文本', value: 'textbox' },
    { label: '多行文本', value: 'textarea' },
    { label: '单选', value: 'select' },
    { label: '多选', value: 'muti_select' },
    { label: '日期', value: 'date' },
    { label: '手机号', value: 'mobile' },
    { label: '邮箱', value: 'email' },
    { label: '区域', value: 'pca' },
    { label: '图片', value: 'picture' }
]);
// 排序的方法
const setSortableFun = () => {
    let nowIndex;
    let copyTableList;
    nextTick(() => {
        const SortableBox = new Sortable(
            document.querySelector('#tableRef').querySelector('.el-table__body-wrapper tbody'),
            {
                animation: 100,
                sort: true,
                delay: 0,
                delayOnTouchOnly: false,
                onChoose: function (evt: any) {
                    nowIndex = evt.oldIndex;
                },
                onEnd: (evt: any) => {
                    copyTableList = JSON.parse(JSON.stringify(tableData.value));
                    const data = copyTableList.splice(evt.oldIndex, 1)[0];
                    copyTableList.splice(evt.newIndex, 0, data);
                    let next_id, pre_id;
                    if (copyTableList[evt.newIndex - 1]) {
                        pre_id = copyTableList[evt.newIndex - 1].source_id;
                    }
                    if (copyTableList[evt.newIndex + 1]) {
                        next_id = copyTableList[evt.newIndex + 1].source_id;
                    }
                    const arr: any = [];
                    copyTableList.forEach((item: any, index: number) => {
                        arr.push({ id: item.id, order: index + 1 });
                    });
                    if (evt.oldIndex != evt.newIndex) {
                        attrSort({ sorts: arr }).then((r: any) => {
                            getTableList();
                        });
                    }
                }
            }
        );
    });
};
// 获取列表数据
const getTableList = () => {
    attrList().then((r: any) => {
        showTable.value = false;
        lately_update_time.value = r.lately_update_time || '';
        tableData.value = r.data.map((item: object) => {
            if (item.type) {
                const index = typeList.findIndex(it => {
                    return it.value == item.type;
                });
                item.typeName = '';
                if (index > -1) {
                    item.typeName = typeList[index].label;
                }
            }
            item.attr_val_name = item.attr_val_name ? item.attr_val_name : '';
            return item;
        });
        setTimeout(() => {
            showTable.value = true;
            nextTick(() => {
                setSortableFun();
            });
        });
    });
};
nextTick(() => {
    getTableList();
});

const showConfigureAdvanced = () => {
    ConfigureAdvancedRef.value.appDialog.visible = true;
};
// 打开添加弹框
const showAddConfigure = () => {
    AddConfigureRef.value.appDialog.visible = true;
    AddConfigureRef.value.titles = '新增客户属性';
};

const showEdit = (val: object, str: string) => {
    AddConfigureRef.value.appDialog.visible = true;
    AddConfigureRef.value.appDialog.editData = val;
    AddConfigureRef.value.titles = str;
};
// 开启或关闭
const openOrClose = (item: object) => {
    if (canClick) {
        canClick = false;
        updateStatus({ attr_id: item.id, is_enable: item.is_enable ? 0 : 1 })
            .then((r: object) => {
                getTableList();
                canClick = true;
            })
            .catch((e: object) => {
                canClick = true;
            });
    }
};
// 删除
const del = (item: any) => {
    ElMessageBox.confirm(
        `您正在删除客户的【${item.name}】的属性，确定之后，客户的该属性将会被删除，请慎重！`,
        '温馨提示',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        delAttr({ attr_id: item.id }).then((r: object) => {
            ElMessage.success('删除成功');
            getTableList();
        });
    });
};
</script>

<style lang="scss" scoped>
.configure-content {
    background: white;

    .configure-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;

        span {
            font-size: 14px;
            font-family: STHeitiSC-Light, STHeitiSC;
            color: #33302d;
        }

        .btn-box {
            display: flex;
            justify-content: flex-start;
        }

        .btn {
            margin-left: 10px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 141px;
            height: 36px;
            background: #ff6b00;
            border-radius: 4px;

            span {
                font-size: 14px;
                font-family: STHeitiSC-Light, STHeitiSC;
                color: #fff;
                margin-left: 10px;
            }
        }
    }

    .pageLimit-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 82px;

        .total-box {
            width: 200px;
            font-size: 14px;
            font-family: STHeitiSC-Light, STHeitiSC;
            color: #33302d;

            span {
                color: #ff6b00;
            }
        }
    }

    .configure-table-box {
        border: 1px solid #eaeaea;

        .sortImg {
            width: 13px;
            height: 11px;
        }

        .btn {
            width: 80px;
            height: 24px;
            background: #fff;
            border-radius: 2px;
            border: 1px solid #eaeaea;
            text-align: center;
            line-height: 24px;
            font-size: 14px;
            font-family: STHeitiSC-Light, STHeitiSC;
            color: #33302d;
            cursor: pointer;
            display: inline-block;
            vertical-align: middle;
            margin-right: 10px;
        }
    }
}

//两行或多行显示
.line {
    overflow: hidden; //溢出内容隐藏
    text-overflow: ellipsis; //文本溢出部分用省略号表示
    display: -webkit-box; //特别显示模式
    -webkit-line-clamp: 2; //行数
    line-clamp: 2;
    -webkit-box-orient: vertical; //盒子中内容竖直排列
}

:deep(.el-table--layout-fixed .el-table__header-wrapper tr th.el-table-fixed-column--right) {
    background-color: #f9f9f9;
}
</style>

<style>
.configure-content-box .el-tabs__item {
    color: #969696;
}

.configure-content-box .is-active {
    color: #ff6b00;
}
</style>
